<template>
  <div class="config-wrapper">
    <a-tabs v-model="activeKey" class="config-tab">
      <a-tab-pane
        style="overflow: auto"
        key="device"
        :tab="$t('authDevice.device')"
      >
        <AuthDeviceList @gotoDevGrp="gotoDevGrp" />
      </a-tab-pane>
      <a-tab-pane
        style="overflow: auto"
        key="deviceGrp"
        :tab="$t('authDevice.deviceGroup')"
      >
        <AuthDeviceGroupList />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import AuthDeviceGroupList from './authDeviceGroupList';
import AuthDeviceList from './authDeviceList';
import { mapState } from 'vuex';
export default {
  name: 'authDevice',
  props: {},
  components: {
    AuthDeviceGroupList,
    AuthDeviceList,
  },
  data() {
    return {
      activeKey: 'device', // TODO 'project',
    };
  },
  activated() {},
  computed: {
    ...mapState('Sdwan', ['modules']),
  },
  created() {},
  mounted() {},
  destroyed() {},
  watch: {},
  provide() {},
  methods: {
    gotoDevGrp() {
      this.activeKey = 'deviceGrp';
    },
  },
};
</script>

<style lang="less" scoped>
.config-wrapper {
  padding: 0 16px 16px;
  height: 100%;
}
.config-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/deep/.ant-tabs-bar {
  text-align: left;
}
/deep/.ant-tabs-content {
  flex: 1;
  height: 0;
}
.config-layout {
  height: 100%;
}
</style>
